<template>
    <div class="day_order_buy">
        <div class="data-content">
            <div class="table-edit">
                <!--代理商-->
                <span>代理商</span>
                <Input v-model="agent" placeholder="最大输入长度35" style="width:140px"/>

                <!--用户名-->
                <span>用户名</span>
                <Input v-model="username" placeholder="搜索" style="width:140px"/>

                <!--日期-->
                <DatePicker style="padding: 10px 0"
                            :open="open"
                            :value="search_date"
                            confirm
                            placement="bottom-end"
                            type="daterange"
                            @on-clear="dateClear"
                            @on-change="dateChange"
                            @on-ok="dateOk">
                    <a href="javascript:void(0)" class="c666" @click="dateClick">
                           <span>
                               <Icon type="calendar"></Icon>
                               <template><strong>{{ search_date_format }}</strong></template>
                           </span>
                    </a>
                </DatePicker>
                <Button type="info">查询</Button>
            </div>
            <Table :loading="loading" border :columns="columns" :data="user_list"
                   @on-selection-change="selectItem"></Table>
            <div class="textr pt10">
                <span>
                    平仓交易总金额：￥<i class="fnormal">0.00</i>
                </span>
                <span>
                    平仓盈亏合计：￥<i class="fnormal cgreen">0.00</i>
                </span>
            </div>
            <Page v-if="userCount > 0" :total="userCount" :current="page_num" @on-change="changePage"
                  @on-page-size-change="changePageSize" size="small" show-total show-sizer class="table-page">
                <slot class="total">共 {{ userCount }} 条</slot>
            </Page>
        </div>

        <!--用户信息-->
        <UserMsgModal :usermsg_show="usermsg_show" :usermsg_loading="usermsg_loading" :usermsg="usermsg" @usermsgOk="usermsgOk"></UserMsgModal>
    </div>
</template>
<style>
    .c666{
        color: #666;
    }
    .day_order_buy .ivu-table-cell{
        padding: 0;
    }
</style>
<script>
    import WrapperContent from '../../../components/wrapper-content.vue'
    import {getUserList, getUser, getLevelList, getPositionList,doUserInfo,delUser,changeUserState} from "@/api/user";
    import * as utils from '../../../assets/js/utils'
    import $ from 'jquery'
    import _ from 'lodash'
    import UserMsgModal from  './../../common/userMsgModal.vue'

    export default {
        components: {
            WrapperContent,UserMsgModal
        },
        data() {
            return {
                agent:'',
                username:'',//用户名
                search_date: [],
                open: false,
                page_size: 10,
                page_num: 1,
                keyword: '',
                loading: true,
                columns: [
                    {
                        title: '订单号',
                        key: 'account',
                        sortable: true
                    },
                    {
                        title: '代理商',
                        key: 'account',
                    },
                    {
                        title: '用户',
                        key: 'tel',
                        align: 'center',
                        render: (h, params) => {
                            return h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small',
                                },
                                on: {
                                    click: () => {
                                        this.usermsg_show = true ;
                                    }
                                }
                            }, params.row.tel);
                        }
                    },
                    {
                        title: '代码/名称',
                        key: 'realname'
                    },
                    {
                        title: '买',
                        align: 'center',
                        children: [
                            {
                                title: '委托号',
                                key: 'name',
                                align: 'center',
                                sortable: true
                            },
                            {
                                title: '下单时间',
                                key: 'name',
                                align: 'center',
                                sortable: true
                            },
                            {
                                title: '成交价',
                                key: 'name',
                                align: 'center',
                                sortable: true
                            },
                        ]
                    },
                    {
                        title: '卖',
                        align: 'center',
                        children: [
                            {
                                title: '委托号',
                                key: 'name',
                                align: 'center',
                                sortable: true
                            },
                            {
                                title: '下单时间',
                                key: 'name',
                                align: 'center',
                                sortable: true
                            },
                            {
                                title: '成交价',
                                key: 'name',
                                align: 'center',
                                sortable: true
                            },
                        ]
                    },
                    {
                        title: '数量(股)',
                        key: 'realname'
                    },
                    {
                        title: '服务费',
                        key: 'realname'
                    },
                    {
                        title: '盈亏',
                        key: 'realname'
                    },
                ],
                user_list: [{tel:837568347}],
                userCount: 0,
                close_show:false,
                close_loading:false,
                usermsg_show:false,
                usermsg_loading : false ,
                usermsg:{
                    id:'13518298587',
                    name:'xx',
                    type:'正式',
                    tel:'13518298587',
                    cash_deposit:'200',
                    balance:'1',
                    register_time:'2018/11/12',
                    last_login_time:'01-22/10:11'
                },
            }
        },
        computed: {
            search_date_format: function () {
                if (this.search_date.length > 0) {
                    return this.search_date[0] + '~' + this.search_date[1];
                } else {
                    return '选择筛选日期'
                }
            }
        },
        created: function () {
            this.loading = false;
            this.userCount = 10;
            /* this.getUserList();
             this.getLevelList();
             this.getPositionList()*/
        },
        methods: {
            dateClick() {
                this.open = !this.open;
            },
            dateChange(date) {
                this.search_date = date;
            },
            dateOk() {
                this.page_num = 1;
                // this.getList();
                this.open = false;
            },
            dateClear() {
                this.search_date = [];
            },

            getUserList() {
                let app = this;
                getUserList(this.page_size, this.page_num, this.keyword).then(res => {
                    app.loading = false;
                    app.user_list = res.data.list;
                    app.userCount = Number(res.data.count)
                });
            },
            selectItem(selection) {
                let app = this;
                app.select_users = [];
                /*  $.each(selection, function (k, v) {
                      app.select_users.push(v.id)
                  });*/
            },
            changePage(page) {
                this.page_num = page;
                this.getUserList()
            },
            changePageSize(page_size) {
                this.page_num = 1;
                this.page_size = page_size;
                this.getUserList()
            },
            usermsgOk(){
                let app = this ;
                setTimeout(() => {
                    app.usermsg_show = false;
                }, 2000);
            },
            closeOk(){
                let app = this ;
                setTimeout(() => {
                    app.close_show = false;
                }, 2000);
            },
        }
    }
</script>
